<template>
    <div style="margin-top: 20px; margin-bottom: 20px;">
        <div>项目地区</div>
        <div class="projectArea">
            <span :class="{ 'shangActive': selectedItems.includes(item.adcode), 'shang': true }" v-for="item in options"
                :key="item.adcode" @click="toggleSelection(item.adcode)">{{ item.label
                }}</span>
        </div>
        <div class="projectArea" v-if="towmulu.length > 0">
            <span :class="{ 'shangActive': twodItems.includes(items.adcode), 'shang': true }"
                v-for="items in twodItemLiss" :key="items.adcode" @click="twodItemSelection(items.adcode)">{{
                items.label
            }}</span>
        </div>
        <div class="projectArea" v-if="threemulu.length > 0">
            <span :class="{ 'shangActive': threeItems.includes(items.adcode), 'shang': true }"
                v-for="items in threeItemLiss" :key="items.adcode" @click="threeItemSelection(items.adcode)">{{
                items.label
            }}</span>
        </div>
    </div>
</template>

<script setup>
import domData from "@/utils/json/dom.json";
import { reactive, ref, onMounted, provide } from "vue";
import { useRadio1Store } from "@/pain/search/search";
const signalsRadio1 = useRadio1Store();
let selectedItems = ref([])
let options = [];
let children2 = ref([]);
let children3 = ref([]);

let towmulu = ref([])
let twodItems = ref([])
let twodItemLiss = ref([])
let threemulu = ref([])
let threeItems = ref([])
let threeItemLiss = ref([])

let ditu = ref({
    leave: selectedItems.value,
    market: twodItems,
})
options = domData.filter((item) => item.parent === 100000);
domData.forEach((item) => {
    Reflect.set(item, "value", item.label);
});
options.forEach((element) => {
    children2 = domData.filter((word) => element.adcode == word.parent);
    Reflect.set(element, "children", children2);
    // children2.forEach((ele) => {
    //     children3 = domData.filter((word) => ele.adcode == word.parent);
    //     Reflect.set(ele, "children", children3);
    // });
});

const toggleSelection = (index) => {
    if (selectedItems.value.includes(index)) {
        selectedItems.value = selectedItems.value.filter(i => i !== index);

    } else {
        selectedItems.value.push(index);
    }
    selectedItems.value.forEach(res => {
        towmulu.value = domData.filter((item) => item.adcode == res);
        twodItemLiss.value = towmulu.value[0]?.children
    })
    signalsRadio1.leave.leave = selectedItems.value
    window.localStorage.setItem("ditu", JSON.stringify(ditu.value));

    console.log(selectedItems)
}
const twodItemSelection = (index) => {
    if (twodItems.value.includes(index)) {
        twodItems.value = twodItems.value.filter(i => i !== index);

    } else {
        twodItems.value.push(index);
    }
    twodItems.value.forEach(res => {
        console.log(res)
        threemulu.value = domData.filter((item) => item.adcode == res);
        threeItemLiss.value = threemulu.value[0]?.children
    })
    signalsRadio1.market.market = twodItems.value
    window.localStorage.setItem("ditu", JSON.stringify(ditu.value));
    console.log(twodItems)
}
const threeItemSelection = (index) => {
    if (threeItems.value.includes(index)) {
        threeItems.value = threeItems.value.filter(i => i !== index);

    } else {
        threeItems.value.push(index);
    }
    console.log(threeItems.value)
    signalsRadio1.quarter.quarter = threeItems.value
}

onMounted(() => {
    console.log(options)
});
defineExpose({
    selectedItems, twodItems, threeItems
})
</script>

<style lang="scss" scoped>
.projectArea {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 1160px;
    border-bottom: 1px solid #DDDDDD;
}

.shang {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    height: 24px;
    margin-right: 30px;
    margin-bottom: 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #333;
}

.shangActive {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    height: 24px;
    margin-right: 30px;
    margin-bottom: 20px;
    padding: 0 5px;
    background-color: #6675FF;
    font-size: 14px;
    border-radius: 4px;
    color: #FFFFFF;
}
</style>